import { ShopGoodsListWrapper } from "./style";
import React, { memo, useEffect, useState } from "react";
import { Image } from "antd";
import { Empty } from "antd";
import GoodsItem from "./goods-item";
import { getShopGoodsList } from "@/service/shop";
import { BulbOutlined } from "@ant-design/icons";

export default memo(function GoodsList(props) {
  const { goodsList } = props;
  const [recommendGoods, setrecommendGoods] = useState([]);
  const recommend = () => {};
  useEffect(() => {
    if (goodsList.length == 0) {
      const res = getShopGoodsList(259480).then((res) => {
        setrecommendGoods(res.data.result);
      });
    }
  }, []);
  return (
    <ShopGoodsListWrapper>
      <div className="shop-goods-list">
        {goodsList.length > 0 ? (
          goodsList.map((item) => {
            return <GoodsItem key={item.id} item={item}></GoodsItem>;
          })
        ) : (
          <div className="empty-wrap">
            <Empty
              className="empty"
              description="暂无相关商品数据,请去其他类别看看！"
              image={Empty.PRESENTED_IMAGE_SIMPLE}
            />
            <div className="tips">推荐商品</div>
            <div className="shop-goods-list">
              {recommendGoods.map((item2) => {
                return <GoodsItem key={item2.id} item={item2}></GoodsItem>;
              })}
            </div>
          </div>
        )}
      </div>
    </ShopGoodsListWrapper>
  );
});
